<template>
  <div>
    <el-tooltip class="item" effect="dark" :disabled="hasTooltip" placement="bottom">
      <div class="flex align-center">
        <span class="font-size-16 font-weight-700">{{ title }}</span>
        <span v-tooltip="title" class="question-box margin-left-5">?</span>
        <span class="font-size-22 font-weight-700 padding-left-15 price-txt"> {{ model.totalPlantPrice | moneyFilterNoUnit }}</span>
      </div>
      <div slot="content">
        <div style="line-height: 30px" v-html="tips"></div>
      </div>
    </el-tooltip>
    <div class="flex align-center padding-top-10">
      <span class="color-666666">上一年执行：{{ model.totalLastPlantPrice | moneyFilterNoUnit }}</span>
      <span class="padding-left-20 color-666666">差异：</span>
      <template v-if="arrowShow">
        <template v-if="model.totalPlantPrice == 0 && model.totalLastPlantPrice == 0">
          <span class="color-666666">--</span>
        </template>
        <template v-else-if="model.totalPlantPrice != 0 && model.totalLastPlantPrice == 0">
          <span class="color-666666">本年新增</span>
        </template>
        <template v-else>
          <span class="color-666666" :class="colorClass">{{ model.totalPlantDeviation | moneyFilterNoUnit }}</span>
          <span class="padding-left-right-5">/</span>
          <span :class="colorClass">{{ model.totalPlantDeviationPrice > 0 ? '' : '-' }}{{ Math.abs(model.totalPlantDeviationPrice || 0) | accMul }}%</span>
        </template>
      </template>

      <span class="color-666666" v-else>{{ deviationRate }}</span>
      <span style="display: none">{{ deviationRate }}</span>
    </div>
    <bar class="bar-box" ref="bar" :ch-config="barConfig" :banLegendDefaultClick="true"></bar>
  </div>
</template>
<script>
  import { fmoneyThousand } from '@/common/js/utils';
  import Bar from '@c/echarts/bar';
  import { barConfig } from '@js/echartsConfig';

  export default {
    props: {
      title: {
        type: String,
        default: '',
      },
      tips: {
        type: String,
        default: '',
      },
      model: {
        type: Object,
        default: () => {
          return {};
        },
      },
      //是收入还是支出
      isIncome: {
        type: Boolean,
        default: true,
      },
      //tips是否禁止
      hasTooltip: {
        type: Boolean,
        default: true,
      },
    },

    data() {
      return {
        barConfig: this.lodash.cloneDeep(barConfig),
        arrowShow: false,
      };
    },

    computed: {
      deviationRate() {
        if (this.model.totalLastPlantPrice == 0 && this.model.totalPlantPrice == 0) {
          this.arrowShow = false;
          return '--';
        } else if (Number(this.model.totalLastPlantPrice) != 0 && this.model.totalPlantPrice == 0) {
          this.arrowShow = false;
          return '计划外';
        } else {
          this.arrowShow = true;
          return this.model.totalPlantDeviationPrice;
        }
      },
      colorClass() {
        if (this.isIncome) {
          return this.model.totalPlantDeviation > 0 ? 'color-green' : 'color-red';
        } else {
          return this.model.totalPlantDeviation > 0 ? 'color-red' : 'color-green';
        }
      },
    },

    watch: {
      model: {
        deep: true,
        handler(obj) {
          this.getMonthCash(obj);
        },
      },
    },

    methods: {
      getMonthCash(obj) {
        //初始化x轴坐标
        obj.monthCashFlowList.forEach(item => {
          this.barConfig.xAxisData.push(item.month + '月');
          this.barConfig.list[0].data.push(item.monthPlantPrice);
        });
        this.$refs.bar.initChart();
      },

      //初始化柱状图
      initBar() {
        this.barConfig.dataZoom = false;
        this.barConfig.list[0].barWidth = '40%';
        this.barConfig.left = '5px';
        this.barConfig.gridTop = '0';
        this.barConfig.gridBottom = '0';
        this.barConfig.list[0].label.show = false;
        this.barConfig.yAxis.show = false;
        this.barConfig.tooltip.show = true;
        this.barConfig.list[0].itemStyle.normal.color = function (params) {
          let color = params.value > 0 ? '#4E9475' : '#FF7A81';
          return color;
        };
        this.barConfig.tooltip.formatter = function (params) {
          return params[0].axisValue + '：' + fmoneyThousand(params[0].value) + '万元';
        };
      },
    },

    created() {
      this.initBar();
    },

    components: { Bar },
  };
</script>

<style lang="scss" scoped>
  .bar-box {
    width: 100%;
    height: 200px;
  }
  .price-txt {
    margin-top: -3px;
  }
</style>
